<template lang="html">
  <div class='sandbox-set'>
    <div class="set-header color666 font-weighted">
      服务端API单元测试-沙盒系统
    </div>
    <div class="set-from-wrap">
      <div class="set-from align-center">
          <h2 class='color666 font-weighted mb20'>系统级参数<span v-show='form.apiType !== ""'>({{form.apiType}})</span>:</h2>
          <!-- form 系统级-->
          <el-form ref="form" :model="form" label-width="50px">
            <!-- 下拉选择框 -->
            <el-form-item>
              <span class='label'>method:</span>
              <el-select v-model="form.apiType" placeholder="请选择类型" style='width: 65%;' @change='getKeys'>
                <el-option
                  v-for="(item, key) in form.apiOptions"
                  :label="item.interfaceName"
                  :value="item.interfaceName"
                  :key="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 根据返回数据渲染key -->
            <el-form-item v-for='(item, key) in form.keyList' :key='key'>
              <span class='label'>{{item.paramName}}:</span>
              <el-input v-model="item.value" style='width: 65%;'></el-input>
              <el-button type="primary" v-show='item.paramName === "sign"' @click='getSign'>点击获取sign</el-button>
            </el-form-item>
            <el-form-item v-show='form.clearCode!==""'>
              <span class='label' style='vertical-align: top;'>明码:</span>
              <span class='font18 bk-all color999' style='width: 65%; display: inline-block;'>{{form.clearCode}}</span>
            </el-form-item>
          </el-form>
          <!-- 应用级 -->
          <h2 class='color666 font-weighted mb20' v-show='form.applyList.length>0'>应用级参数:</h2>
          <el-form ref="formApply" :model="form" label-width="50px">
            <el-form-item v-for='(item, key) in form.applyList' :key='key'>
              <span class='label'>{{item.paramName}}:</span>
              <el-input v-model="item.value" style='width: 65%;'></el-input>
            </el-form-item>
          </el-form>
          <h2 class='color666 font-weighted'>明码:</h2>
          <p style='padding: 20px 80px; color:#333;' class='font20 word-break lineh16'>
            <span v-for='(item, key) in form.keyList'>{{item.paramName}}={{item.value}}&</span><span v-for='(item, key) in form.applyList'>{{item.paramName}}={{item.value}}<span v-if='key !== form.applyList.length-1'>&</span></span>
          </p>
          <el-button type="primary" style='width: 60%; position:relative; left: 50%; transform:translateX(-55%)' class='mb10' @click='getAll' :disabled="isGet">提 交 数 据</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import sandboxIndex from './index.js'
  export default {
    ...sandboxIndex
  }
</script>

<style lang="css" scoped>
  @import "./index.css";
</style>
